<template>
    <div class="monitor_page_class">
        <div class="card_div_class">
            <div style="display: flex; font-weight: bold; align-items: center">
                <div class="dots_class"></div>
                <div style="margin-left: 2px">1号包装电源</div>
            </div>
            <canvas id="container" />
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import F2 from "@antv/f2/lib/index-all";
export default {
    name: "Monitor",
    data() {
        return {};
    },
    computed: {
        ...mapGetters([])
    },
    mounted() {
        this.initPixelChart();
    },
    methods: {
        initPixelChart: function () {
            const data = [
                {
                    time: "00:00:00",
                    tem: 10
                },
                {
                    time: "00:10:00",
                    tem: 22
                },
                {
                    time: "00:30:00",
                    tem: 16
                },
                {
                    time: "00:35:00",
                    tem: 26
                },
                {
                    time: "01:00:00",
                    tem: 12
                },
                {
                    time: "01:20:00",
                    tem: 26
                },
                {
                    time: "01:40:00",
                    tem: 18
                },
                {
                    time: "02:00:00",
                    tem: 26
                },
                {
                    time: "02:20:00",
                    tem: 12
                }
            ];
            const chart = new F2.Chart({
                id: "container",
                height: 200,
                pixelRatio: window.devicePixelRatio
            });
            chart.source(data, {
              date: {
                type: 'timeCat',
                tickCount: 5,
                values: ["00:00:00","00:10:00","00:30:00","01:20:00","02:20:00","02:00:00",],
                mask: 'HH:mm:ss'
              },
                time: {
                    tickCount: 3,
                    range: [0, 1]
                },
                tem: {
                    tickCount: 5,
                    min: 0
                }
            });

            chart.axis("time", {
              label: {
                rotate: Math.PI / 3,
                textAlign: 'start',
                textBaseline: 'middle'
              }
            });
            chart.tooltip({
                showCrosshairs: true
            });
            chart.interaction("pan");
            // 定义进度条
            chart.scrollBar({
                mode: "x",
                xStyle: {
                    offsetY: -5
                }
            });
            chart.area().position("time*tem").color("l(90) 0:#1890FF 1:#f7f7f7").shape("smooth");
            chart.line().position("time*tem").color("l(90) 0:#1890FF 1:#f7f7f7").shape("smooth");
            chart.render();
        }
    }
};
</script>

<style scoped lang="less">
.monitor_page_class {
    width: 100%;
    height: 100%;
    padding: 20px 10px 80px 10px;
}
.monitor_page_class .card_div_class {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}
.dots_class {
    width: 10px;
    height: 10px;
    background: #409eff;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #409eff;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%,
    100% {
        opacity: 0;
    }
}
</style>
